import React from 'react'
import {Form, List, Switch, Input, Button, message} from 'antd';
import { connect } from 'dva';
import './Comment.scss';
import { getCommentConfig, updateCommentConfig } from '../../../services/fetch';


const { TextArea } = Input;
@connect(({ video }) => ({
    video,
}))

@Form.create()
export default class CommentConfig extends React.PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            config1: {
                disabled: false,
                checked: true,
            },
            config2: {
                disabled: false,
                checked: true,
            },
            config3: {
                disabled: false,
                checked: true,
            },
            config4: {
                value: '',
            }


        }


    }

    componentDidMount() {

        this.getConfig();

    }

    handleSwitchChange1 = (checked,type) => {

        if (type == 1){
            if (checked[0]){
                this.setState({
                    config1:{
                        checked: true,
                        disabled:false
                    },
                    config2:{
                        checked: true,
                        disabled:true
                    }
                })
            }else{
                this.setState({
                    config1: {
                        config1:{
                            checked: false,
                            disabled:false
                        }
                    },
                    config2:{
                        checked: true,
                        disabled:false
                    },


                })
            }
        }else if (type == 2){

            this.setState({

                config2:{
                    checked: checked[0],
                    disabled:false
                }

            })
        } else if (type == 3){

            this.setState({

                config3:{
                    checked: checked[0],
                    disabled:false
                }

            })
        }


    }

    handleInputChange = (e) => {
        this.setState({

            config4:{
                value: e.target.value,
            }

        })
    }
    submitConfig = () => {
        let data = {
            'theme_auto_check': this.state.config1.checked ? 1 : 0,
            'theme_auto_filter': this.state.config2.checked ? 1 : 0,
            'theme_open_comment': this.state.config3.checked ? 1 : 0,
            'theme_return_information': this.state.config4.value

        };
        updateCommentConfig(data).then((res)=>{
            if(res.data.code === 200){
                message.success('修改成功！');
                this.getConfig();
            }else{
                message.error(res.data.msg)
            }
        })
    }
    /**
     * 获取配置数据
     */
    getConfig=()=>{
        getCommentConfig().then((res)=>{
            let data = res.data.data;

            let configs = [];
            data.map((item,index)=>{
                if (item.key == 'theme_auto_check') {
                    configs.config1 = {
                        disabled:false,
                        checked:item.value > 0 ? true : false
                    }

                }else if (item.key == 'theme_auto_filter') {
                    configs.config2 = {
                        disabled:false,
                        checked:item.value > 0 ? true : false
                    }

                }else if (item.key == 'theme_open_comment') {
                    configs.config3 = {
                        disabled:false,
                        checked:item.value > 0 ? true : false
                    }

                }else if (item.key == 'theme_return_information') {
                    configs.config4 = {
                        value:item.value,
                    }
                }
            })
            if (configs.config1.checked){
                configs.config2.checked = true;
                configs.config2.disabled = true;
            }

            this.setState({
                config1:configs.config1,
                config2:configs.config2,
                config3:configs.config3,
                config4:configs.config4,

            });

        })
    }




    render() {

        const quanxian = this.props.video.quanxian;

        let config1 = <Switch checkedChildren="自动审核"  checked={this.state.config1.checked} unCheckedChildren="人工审核" disabled={this.state.config1.disabled}   onChange={(...e)=>{
            this.handleSwitchChange1(e,1)
        }}/>;
        let config2 = <Switch checkedChildren="开" checked={this.state.config2.checked} unCheckedChildren="关"  disabled={this.state.config2.disabled} onChange={(...e)=>{
            this.handleSwitchChange1(e,2)
        }}/>;
        let config3 = <Switch checkedChildren="开" checked={this.state.config3.checked} unCheckedChildren="关"  disabled={this.state.config3.disabled} onChange={(...e)=>{
            this.handleSwitchChange1(e,3)
        }}/>;
        let config4 =   <TextArea rows={4} style={{width:"100%"}} value={this.state.config4.value} onChange={this.handleInputChange}/>;


        const data = [
            {
                title: '审核设置',
                description: '是否自动审核（自动检测、过滤敏感词并审核通过评论）',
                content:config1
            },
            {
                title: '敏感词过滤',
                description: '设置为人工审核时是否开启敏感词过滤',
                content:config2
            },
            {
                title: '全局评论',
                description: '是否开启全局评论',
                content:config3
            },
            {
                title: '审核失败反馈',
                description: '审核未通过反馈信息',
                content:config4
            },
        ];

        return (
            <section className="Comment" >
            <header className="header">
            评论配置
            </header>
            <div className="content">
            <div className="main">
            <List

        itemLayout="horizontal"
        dataSource={data}
        renderItem={item => (
        <List.Item>
        <List.Item.Meta
        title={item.title}
        description={item.description}
            />
            <div style={{width:"50%"}}>{item.content}</div>
            </List.Item>
            )}
        />
            <div>
        <Button
        type="primary"
        style={{
            marginRight: '20px'
        }}
        onClick={this.submitConfig}
    >提交</Button>
        <Button
        onClick={() => {
            this.getConfig();
        }}
    >重置</Button>
            </div>
            </div>
            </div>
            </section>


    );
    }
}